<template>
	<view class="page">
		<button type="default">测试</button>
		<!-- page -->
		<view style="flex: 1;margin-bottom: 44px;">
			<studentHome v-if="tabindex == 0"/>
			<studentCourse v-if="tabindex == 1" />
			<studentNews v-if="tabindex == 2"/>
			<studentMine v-if="tabindex == 3"/>
		</view>
		<!-- tabbar -->
		<cover-view style="display: flex;flex-direction: column;height: 44px;position: relative;position: fixed;left: 0;bottom: 0;right: 0;background-color: #FFFFFF;z-index: 99;
		 padding-bottom: constant(safe-area-inset-bottom);  
		  padding-bottom: env(safe-area-inset-bottom);  
		
		">
			<!-- line -->
			<view style="height: 1px;background-color: #ebebeb;position: absolute;left: 0;top: 0;right: 0;" />
			<!-- body -->
			<view style="flex: 1;display: flex;">
				<view @click="tabItemClick(idx)" style="flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;"
					v-for="(obj,idx) in tabs">
					<text :class="['iconfont', obj.icon]" :style="{'font-size':'20px','color':idx == tabindex?'#0D3C7D':'#333333'}"></text>
					<text :style="{'font-size': '10px','color':idx == tabindex?'#0D3C7D':'#333333'}">{{obj.text}}</text>
				</view>
				</view>
			</cover-view>
		</view>
	</view>
</template>

<script>
	import studentNews from "@/pages/student-news/student-news.vue"
	import studentMine from "@/pages/student-mine/student-mine.vue"
	import studentHome from "@/pages/student-home/student-home.vue"
	import studentCourse from "@/pages/student-course/student-course.vue"
	export default {
		components:{
			studentHome,
			studentCourse,
			studentNews,
			studentMine
		},
		data() {
			return {
				tabindex: 0,
				tabs: [{
						icon: "icon-shouye",
						text: "首页"
					},
					{
						icon: "icon-xuexizhongxin",
						text: "课程"
					}, {
						icon: "icon-xinwen",
						text: "咨询"
					}, {
						icon: "icon-wode",
						text: "我的"
					},
				]
			}
		},
		onLoad() {
		},
		created() {
			
		},
		methods: {
			tabItemClick(idx) {
				this.tabindex = idx
			}
		}
	}
</script>

<style>
	.page {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
</style>
